<template>
  <div class="table-body">
    <el-table :data="rulesList">
      <el-table-column label="Warming Type" prop="roleId"/>
      <el-table-column label="Data" prop="roleName" />
      <el-table-column label="Value" prop="roleKey" />
      <el-table-column label="Time" prop="time" />
<!--      <el-table-column label="Task Result" prop="roleSort" width="200">-->
<!--        <template slot-scope="scope">-->
<!--          <el-progress :percentage="scope.row.progress" :format="format" :color="scope.row.type"></el-progress>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="operate" prop="roleSort" width="110">
        <template slot-scope="scope">
          <el-link>Try again</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listRules } from "@/api/system/rules";
export default {
  name: "tabWarning",
  data(){
    return{
      rulesList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        beginTime: null,
        endTime: null,
        columnName: null,
        condition: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods:{
    /** 查询规则列表 */
    getList() {
      this.loading = true;
      listRules(this.queryParams).then(response => {
        this.rulesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // format(percentage) {
    //   return percentage === 100 ? 'success' : `${percentage}%`;
    // }
  }
}
</script>

<style scoped>
.table-body{
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  border: 1px solid #e6ebf5;
  border-radius: 5px;
}
</style>
